<style type="text/css">
	.build-box {
		justify-content: space-between;
		padding: 10px 0;
	}
	.build-box .title {
		font-size: 14px;
		line-height: 32px;
	}
	.building-ul {
		display: flex;
		flex-flow: wrap;
	}
	.building-li {
		width: 228px;
		padding: 5px;
		background: #fff;
		box-shadow: 0 0 8px rgba(204,213,221,.75);
		margin-right: 16px;
		margin-top: 25px;
		position: relative;
		overflow: hidden;
	}
	.building-li:nth-child(4n) {
		margin-right: 0px;
	}
	.building-li .title {
		height: 32px;
		line-height: 38px;
	}
	.building-li .operation {
		position: absolute;
		top: 133px;
		left: 5px;
		right: 5px;
		height: 32px;
		line-height: 32px;
		background-color: rgba(0,0,0,.4);
		display: flex;
		justify-content: space-between;
	}
	.building-li .operation span {
		color: #fff;
		cursor: pointer;
		padding: 0 8px;
	}
	.add-building {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.add-building-wrap {
		width: 400px;
		background-color: #fff;
		position: relative;
	}
	.add-building-wrap .close {
		font-size: 14px;
		position: absolute;
		right: 0;
		top: 0;
		height: 45px;
		width: 45px;
		line-height: 45px;
	}
	.add-building-wrap .title {
		height: 45px;
		line-height: 45px;
	}
	.building-config {
		width: 957px;
		background: #eee;
		margin-top: 10px;
	}
	.building-floor-start-end {
		padding: 15px 0;
		margin-left: 155px;
	}
	.building-floor {
		background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		width: 645px;
		margin: 0 auto;
	}
	.building-footer {
		width: 645px;
		padding: 15px 0;
		margin: 0 auto;
	}
	.checkall-build {
		width: 14px;
		height: 14px;
		border: 1px solid #ddd;
		border-radius: 2px;
		display: inline-block;
		transform: translate(0, 2px);
	}
	.up-pic-wrap {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.4);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	.up-pic {
		width: 600px;
		background: #fff;
		position: relative;
	}
	.up-pic .close {
		font-size: 14px;
		position: absolute;
		right: 0;
		top: 0;
		height: 45px;
		width: 45px;
		line-height: 45px;
	}
	.up-pic .title {
		height: 45px;
		line-height: 45px;
	}
	.up-pic .container {
		padding: 15px;
		width: 600px;
		height:248px;
		background:rgba(249,249,249,1);
	}
	.up-pic .container .up-box {
		width: 100%;
	}
	.up-pic .container .up-box input {
		width: 45%;
		vertical-align: middle;
	}
	.up-pic .container .up-box button {
		vertical-align: middle;
	}
	.up-pic .container .floors {
		width: 370px;
		margin: 20px 0 0 110px;
		height: 150px;
		overflow-y: scroll;
	}

	.building-group-container {
		background-color:#F7F7F7;
		height:52px;
		line-height:52px;
		padding:0 10px;
		margin-top:11px;
		box-sizing:border-box;
	}

	.building-group-container .item-group{
		float:left;
		margin-right:13px;
	}

	.building-group-container .item-group .icon{
		margin-right:10px;
		font-size:16px;
		vertical-align:middle;
	}

	.building-group-container .one-group-icon{
		float:left;
		cursor:pointer;
		display:inline-block;
		width:30px;
		height:30px;
		line-height:30px;
		border-radius:30px;
		text-align:center;
		background-color:#fff;
		margin-right:10px;
		margin-top:10px;
		color:#565E99;
	}

	.building-group-container .add-group-btn{
		float:left;
		margin-right:10px;
		margin-top:8px;
	}

</style>


<section id="building" class="ml-24 mr-24">
	<div class="image-up"></div>

	<hl-page-header title="楼宇信息" title-color="#666" title-font="14px" title-font-weight="normal">
		<hl-button @on-click="addShow" type="outline">新建楼宇</hl-button>
	</hl-page-header>

	<!-- 楼宇组合 -->
	<div class="building-group-container">
		<span class="icon-Gm-all-building one-group-icon icon" @click="resetGroup"></span>
		<hl-button class="add-group-btn" @on-click="addInitGroup" size="mini" v-if="isShowAddGroupBtn && quanxian.indexOf('c330') > -1">新增组合</hl-button>
		<div class="item-group" v-if="isShowGroupOne">
			<hl-operation-select v-model="selectedGroupOneData" :width="220" :data="buildingGroupOneData" @on-change="getOneGroupNode" @on-enter-add-item="addGroup(1,arguments)" @on-leave-add-item="leaveGroup(1,arguments)" @on-edit-item="editGroup(1,arguments)" @on-delete-item="delGroup(1,arguments)" :add="isAddFlag" :edit="isEditFlag" :del="isDelFlag"></hl-operation-select>
		</div>
		<div class="item-group" v-if="isShowGroupTwo">
			<span class="icon-Gm-Cascader icon"></span>
			<hl-operation-select v-model="selectedGroupTwoData" :width="220" :data="buildingGroupTwoData" @on-change="getTwoGroupNode" @on-enter-add-item="addGroup(2,arguments)" @on-leave-add-item="leaveGroup(2,arguments)" @on-edit-item="editGroup(2,arguments)" @on-delete-item="delGroup(2,arguments)" :add="isAddFlag" :edit="isEditFlag" :del="isDelFlag"></hl-operation-select>
		</div>
		<div class="item-group" v-if="isShowGroupThree">
			<span class="icon-Gm-Cascader icon"></span>
			<hl-operation-select v-model="selectedGroupThreeData" :width="220" :data="buildingGroupThreeData" @on-change="getThreeGroupNode" @on-enter-add-item="addGroup(3,arguments)" @on-leave-add-item="leaveGroup(3,arguments)" @on-edit-item="editGroup(3,arguments)" @on-delete-item="delGroup(3,arguments)" :add="isAddFlag" :edit="isEditFlag" :del="isDelFlag"></hl-operation-select>
		</div>
	</div>

	<hl-dropdown :left="addGroupPopoverPosition.left" :top="addGroupPopoverPosition.top" :data="addGroupPopoverData" placement="left" @on-change="confirmAddGroup" @on-enter="enterPopover" @on-leave="leavePopover"></hl-dropdown>

	<div class="building-wrap">
		<div v-for="(item, index) in buildingsList" class="building-ul">
			<div class="building-li" v-for="item0 in item" v-if="isSelectedGroup ? item0.configState == 'Y' : true ">
				<img :src="item0.preview + '?w=300&h=300'" width="218" height="160">
				<div class="operation font-14">
					<span @click="delBuilding(item0)">删除</span>
					<span @click="editShow(item0)">编辑</span>
					<span @click="config(index, item0)">配置</span>
				</div>
				<div class="title">{{ item0.name || '--' }}</div>
			</div>

			<!-- 配置楼宇 -->
			<div class="building-config" v-if="index == showBuildingConfigIndex">
				<div class="building-floor-start-end clearfix">
					<div class="pull-left">
						<span>起始楼层：</span>
						<input type="number" class="form-control inline" style="width: 100px;" v-model="startNum">
					</div>
					<div class="pull-left ml-10">
						<span>结束楼层：</span>
						<input type="number" class="form-control inline" style="width: 100px;" v-model="endNum">
					</div>
					<div class="pull-left ml-10">
						<span>排除楼层：</span>
						<input type="text" class="form-control inline" style="width: 192px;" placeholder="排除楼层用空格分隔" v-model="debarNum" @blur="debarFloorValidate">
					</div>
					<div class="pull-left ml-10">
						<hl-button @on-click="addMoreFloors" size="mini">生成</hl-button>
					</div>
				</div>

				<div class="building-floor">
					<div class="dy-flex text-center line-height-40">
						<div class="dy-fx-1" v-if="delFlag">
							<span class="cursor" @click="checkAllEvent">
								<span :class="{'checkall-build': !checkAll, 'icon-Gm-confirm': checkAll, 'color-primary': checkAll}"></span>
								<span>全选</span>
							</span>
						</div>
						<div class="dy-fx-1">序</div>
						<div class="dy-fx-2">建筑楼层</div>
						<div class="dy-fx-2">楼层名称</div>
						<div class="dy-fx-1">平面图</div>
					</div>
					<div class="dy-flex text-center border-t" style="line-height: 60px;padding: 5px 0;" v-for="(item, index) in floorList">
						<div class="dy-fx-1" v-if="delFlag">
							<span @click="checkEvent(item)" class="cursor" :class="{'checkall-build': floorIds.indexOf(item.floorId) == -1, 'icon-Gm-confirm': floorIds.indexOf(item.floorId) > -1, 'color-primary': floorIds.indexOf(item.floorId) > -1}"></span>
						</div>
						<div class="dy-fx-1">{{ index+1 }}</div>
						<div class="dy-fx-2">
							<div v-if="!item.flag">
								<span>{{ item.floor }}</span>
								<span class="icon-Gm-edit" @click="showEditFloor(index)"></span>
							</div>
							<input type="number" class="form-control text-center" v-model="item.floor" style="width: 80%;margin: 14px auto 0;" v-if="item.flag" @blur="editFloor(index)">
						</div>
						<div class="dy-fx-2">
							<div v-if="!item.floorNameFlag">
								<span>{{ item.floorName }}</span>
								<span class="icon-Gm-edit" @click="showEditFloorName(index)"></span>
							</div>
							<input type="text" class="form-control text-center" v-model="item.floorName" style="width: 80%;margin: 14px auto 0;" v-if="item.floorNameFlag" @blur="editFloor(index)">
						</div>
						<div class="dy-fx-1">
							<span v-if="!item.plainGraph">暂无平面图</span>
							<div class="relative" style="width: 60px; height: 60px; margin: 0 auto;" v-if="item.plainGraph">
								<span class="cursor absolute font-14" @click="delPicFloor(item)" style="right: -7px; top: -3px;background: rgba(0,0,0,.4);color: #fff;width: 16px;height: 16px;line-height: 16px;border-radius: 50%;">x</span>
								<img :src="item.plainGraph+'?w=60&h=60'" width="60" height="60">
							</div>
						</div>
					</div>
					<!-- //生成单个楼宇 -->
					<div class="dy-flex text-center line-height-40 border-t pt-10" v-for="(item, index) in addFloors">
						<div class="dy-fx-1">{{ floorList.length+index+1 }}</div>
						<div class="dy-fx-1">
							<div style="width: 80%; margin: 0 auto;">
								<input type="number" class="form-control text-center" v-model="item.floor" @blur="floorValidate(index)">
							</div>
						</div>
						<div class="dy-fx-1">
							<div style="width: 80%; margin: 0 auto;">
								<input type="text" class="form-control text-center" v-model="item.floorName">
							</div>
						</div>
						<div class="dy-fx-1 text-center">
							<span class="icon-Gm-confirm mr-6 cursor" @click="saveFloor(index)"></span>
							<span class="icon-Gm-cancel cursor" @click="delFloor(index)"></span>
						</div>
					</div>

				</div>
				<div class="building-footer">
					<hl-button @on-click="addFloor" size="mini">添加单行</hl-button>
					<hl-button @on-click="queryDel" size="mini">确认删除</hl-button>
					<hl-button @on-click="cancelDel" size="mini">取消</hl-button>
					<hl-button @on-click="showDel" size="mini">删除</hl-button>
					<hl-button @on-click="removeAllFloor" size="mini">清空</hl-button>
					<hl-button @on-click="showPic">上传平面图</hl-button>
				</div>
			</div>
		</div>
	</div>

	<!-- 配置楼宇组合 -->
	<hl-dialog :title="groupTitle" :visible="isShowGroupDialog" @on-close="cancelGroup">
    <hl-row class="mb-10">
        <hl-col :span="4" class="line-height-34">组合名称：</hl-col>
        <hl-col :span="8">
            <input type="text" class="form-control" v-model="groupName">
        </hl-col>
    </hl-row>
		<hl-divider></hl-divider>
    <hl-row>
        <hl-col :span="4" class="line-height-34">配置楼栋：</hl-col>
    </hl-row>
		<hl-checkbox-button  justify-content='flex-start' :width="140" :data="groupBuildingsList" v-model="groupBuildingIds" @on-click="selectedGroupBuilding" flex="4"></hl-checkbox-button>
    <div slot="footer">
        <hl-button type="primary" @on-click="confirmUpdateGroup">确认</hl-button>
        <hl-button type="outline" @on-click="cancelGroup">取消</hl-button>
    </div>
	</hl-dialog>

	<!-- 新增楼宇 -->
	<div class="add-building" v-if="addEditFlag">
		<div class="add-building-wrap br-4">
			<div class="close icon-Gm-close text-center" @click="buildingKey"></div>
			<div class="title text-center">{{ addEditTitle }}楼宇</div>
			<div style="background-color: #f9f9f9;">
				<div class="dy-flex pt-10">
					<div class="dy-fx-2 line-height-34"><span class="ml-10"></span>楼宇名称：</div>
					<div class="dy-fx-4">
						<input type="text" class="form-control" v-model="addEditValue">
					</div>
					<div class="dy-fx-1"></div>
				</div>
				<div class="dy-flex pt-10 pb-10">
					<div class="dy-fx-2 line-height-34"><span class="ml-10"></span>预览图：</div>
					<div class="dy-fx-4">
						<button class="n-btn-default btn" v-if="!addEditImg" @click="buildingImgUp">上传图片</button>
						<div class="relative" style="width: 100px;height: 100px;" v-if="addEditImg">
							<img :src="addEditImg + '?w=100&h=100'" alt="预览图" style="width: 100px;height: 100px;background-color: #eee;display: block;" />
							<div class="absolute text-center cursor" @click="buildingImgUp" style="bottom: 0;left: 0;width: 100%;height: 32px;line-height: 32px;background-color: rgba(0,0,0,.4);color: #fff;">重新上传</div>
						</div>
					</div>
					<div class="dy-fx-1"></div>
				</div>
			</div>
			<div class="pt-8 pb-8 text-center">
				<hl-button @on-click="addBuilding" size="mini" v-if="this.addEditTitle == '新增'">保存</hl-button>
				<hl-button @on-click="editBuilding" size="mini" v-if="this.addEditTitle == '编辑'">保存</hl-button>
				<hl-button @on-click="buildingKey" size="mini">取消</hl-button>
			</div>
		</div>
	</div>
	<!-- 上传平面图 -->
	<div class="up-pic-wrap" v-if="picFloorFlag">
		<div class="up-pic br-4">
			<div class="title text-center">平面图上传</div>
			<div class="close icon-Gm-close text-center" @click="showPic"></div>
			<div class="container">
				<div class="up-box text-center">
					<input type="text" class="form-control inline mr-10" v-model="picUrl">
					<hl-button size="mini" @on-click="buildingImgUp">上传</hl-button>
				</div>
				<div class="floors">
					<p class="color-666">适用楼层：</p>
					<ul class="clearfix">
						<li class="cursor pull-left mr-10 mt-10" v-for="(item, index) in picFloors" @click="selectFloorPic(item)">
							<span :class="{'checkall-build': picFloorIds.indexOf(item.floorId) == -1, 'icon-Gm-confirm': picFloorIds.indexOf(item.floorId) > -1, 'color-primary': picFloorIds.indexOf(item.floorId) > -1}"></span>
							<span>{{ item.floorName }}</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="text-center ptb-10">
				<hl-button type="primary" @on-click="savePic">保存</hl-button>
				<hl-button type="outline" @on-click="closePic">取消</hl-button>
			</div>
		</div>
	</div>

</section>

<script src="modules/projectConfig/scripts/building.js" charset="utf-8"></script>
